<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col style="margin-top: 20px">
          <span class="title_span">添加通知</span>
        </el-col>
        <el-col style="margin-top: 20px" :span="18" :offset="3">
          <el-input v-model="input" placeholder="请输入标题"></el-input>
        </el-col>
        <el-col style="height: 420px;margin-top: 20px" :span="20" :offset="2">
          <VueEditor
              :editorToolbar="customToolbar"
              style="height: 350px"
              v-model="content"></VueEditor>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1" :offset="2">
          <el-button @click="upData" style="margin-right: 920px" type="warning">
            发布
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-col>
        <el-col :span="2" :offset="15">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in tableData"
                :label="item.departDetail"
                :value="item.departId">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-divider></el-divider>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {VueEditor} from "vue2-editor";
import {addInternalNotice, getAllDepartment} from "@/api/request";

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      tableData: [],
      value: 1,
      input: '',
      content: '',
      customToolbar: [
        ['bold', 'italic', 'underline'],  //加粗\斜体\下划线
        ['italic'],  //斜体----也可以拆开来写，用于换位置顺序
        [{'align': ''}, {'align': 'center'}, {'align': 'right'}], //对齐
        [{'list': 'ordered'}, {'list': 'bullet'}, {'list': 'check'}], //有序无序列表
        ['strike'],   //作废（文字中间一横）
        ['underline'],
        ['clean'],   //清楚格式（所谓去掉背景色这些花里胡巧）
      ],
    };
  },
  methods: {
    upData() {
      let params = {
        noticeName: this.input,
        noticeDetail: this.content,
        departId: this.value
      }
      addInternalNotice(params).then(
          res => {
            if (res.data.code === 1) {
              this.$message.success(res.data.description)
              this.input = ''
              this.content = ''
            }
          }
      )
    }
  },
  mounted() {
    getAllDepartment().then(
        res => {
          if (res.data.code === 1) {
            this.tableData = res.data.data
          }
        }
    )
  }
}
</script>

<style scoped>
.title_span {
  font-size: 2em;
}

::v-deep .el-input__inner {
  text-align: center;
  background-color: #f9f4e9 !important;
}

::v-deep input::-ms-input-placeholder {
  text-align: center;
}

::v-deep input::-webkit-input-placeholder {
  text-align: center;
}
</style>

